{% extends "base.html" %}

{% block title %} Home {% endblock %}

{% block content %}
<h1> login </h1>

<form id="loginForm">
    username: <input name="name"/>
    password: <input name="password"/>
    <input type="submit" value="提交">
</form>
<div id="error-container"></div>
<script>
    // 拦截表单提交事件
    function handleSubmit(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单数据
        const formData = {
            name: document.querySelector('input[name="name"]').value,
            password: document.querySelector('input[name="password"]').value
        };

        // 发送 JSON 数据
        fetch('login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json' // 设置请求头为 JSON
            },
            body: JSON.stringify(formData) // 将表单数据转换为 JSON 字符串
        })
            .then(response => {
                // 保存响应对象的状态
                const isResponseOk = response.ok;
                return response.text().then(data => {
                    return {isResponseOk, data};
                });
            })
            .then(({isResponseOk, data}) => {
                if (isResponseOk) {
                    console.log('Success:', data);
                    // 在这里处理响应数据
                    document.getElementsByTagName('body')[0].innerHTML = data;
                } else {
                    // 处理错误响应
                    console.error('Error:', data);
                    document.getElementById('error-container').innerHTML = data;
                }
            })
            .catch(error => {
                // 处理网络错误或其他异常
                console.error('Network Error:', error);
                document.getElementById('error-container').innerHTML = '网络错误，请稍后再试。';
            });
    }

    // 绑定表单提交事件
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('loginForm').addEventListener('submit', handleSubmit);
    });
</script>

{% endblock %}
